<template>
  <div class="mall-container">
    <!-- 顶部导航栏 -->
    <header class="mall-header">
      <div class="header-content">
        <div class="logo-area">
          <div class="lipstick-icon">💄</div>
          <h1 class="mall-logo">美妆商城</h1>
        </div>
        
        <div class="search-box">
          <el-input
            placeholder="搜索商品..."
            prefix-icon="el-icon-search"
            v-model="searchKeyword"
            class="search-input"
          >
            <template #append>
              <el-button type="primary">搜索</el-button>
            </template>
          </el-input>
        </div>
        
        <div class="user-actions">
          <div class="action-item">
            <i class="el-icon-shopping-cart-2"></i>
            <span>购物车</span>
            <span class="badge" v-if="cartCount > 0">{{ cartCount }}</span>
          </div>
          <div class="action-item">
            <i class="el-icon-star-on"></i>
            <span>收藏夹</span>
          </div>
          <div class="action-item user-center">
            <el-dropdown trigger="click">
              <span class="user-info">
                <i class="el-icon-user"></i>
                <span>{{ username }}</span>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <i class="el-icon-s-order"></i> 我的订单
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-user"></i> 个人中心
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-setting"></i> 账户设置
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    <i class="el-icon-switch-button"></i> 退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 商品分类导航 -->
    <nav class="category-nav">
      <div class="nav-content">
        <div class="category-menu">
          <el-menu mode="horizontal" :default-active="activeCategory" class="category-menu-list" router>
            <el-menu-item index="home">首页</el-menu-item>
            <el-menu-item index="/user/products?category=1">护肤</el-menu-item>
            <el-menu-item index="/user/products?category=2">彩妆</el-menu-item>
            <el-menu-item index="/user/products?category=3">香水</el-menu-item>
            <el-menu-item index="/user/products?category=4">头发护理</el-menu-item>
            <el-menu-item index="/user/products">全部商品</el-menu-item>
          </el-menu>
        </div>
      </div>
    </nav>
    
    <!-- 主要内容区域 -->
    <main class="mall-content">
      <!-- 轮播图 -->
      <section class="banner-section">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <div class="banner-item" :style="{ backgroundImage: `url(${item.imageUrl})` }">
              <div class="banner-content">
                <h2>{{ item.title }}</h2>
                <p>{{ item.description }}</p>
                <el-button type="primary">立即查看</el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </section>
      
  
      
      <!-- 热门推荐 -->
      <section class="section-block recommended">
        <div class="section-header">
          <h2>热门推荐</h2>
          <el-button type="text" @click="$router.push('/user/products?sort=sales')">查看更多 <i class="el-icon-arrow-right"></i></el-button>
        </div>
        
        <div class="product-grid">
          <div class="product-card" v-for="product in recommendedProducts" :key="product.id" @click="viewProductDetail(product.id)">
            <div class="product-image">
              <img :src="product.imageUrl" :alt="product.name" />
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">¥{{ product.price }}</div>
              <div class="product-rating">
                <i class="el-icon-star-on" v-for="n in 5" :key="n"></i>
                <span>({{ product.reviewCount }})</span>
              </div>
            </div>
            <div class="product-actions">
              <el-button type="primary" size="small" @click.stop="addToCart(product)">加入购物车</el-button>
              <el-button type="text" size="small" icon="el-icon-star-off" @click.stop="addToFavorite(product)"></el-button>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 新品上架 -->
      <section class="section-block new-arrivals">
        <div class="section-header">
          <h2>新品上架</h2>
          <el-button type="text" @click="$router.push('/user/products?sort=new')">查看更多 <i class="el-icon-arrow-right"></i></el-button>
        </div>
        
        <div class="product-grid">
          <div class="product-card" v-for="product in newArrivals" :key="product.id" @click="viewProductDetail(product.id)">
            <div class="product-image">
              <img :src="product.imageUrl" :alt="product.name" />
              <div class="new-badge">新品</div>
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-desc">{{ product.description }}</p>
              <div class="product-price">¥{{ product.price }}</div>
            </div>
            <div class="product-actions">
              <el-button type="primary" size="small" @click.stop="addToCart(product)">加入购物车</el-button>
              <el-button type="text" size="small" icon="el-icon-star-off" @click.stop="addToFavorite(product)"></el-button>
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 底部区域 -->
    <footer class="mall-footer">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于我们</h3>
          <ul>
            <li>品牌故事</li>
            <li>企业责任</li>
            <li>招聘信息</li>
            <li>联系我们</li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>购物指南</h3>
          <ul>
            <li>购物流程</li>
            <li>会员介绍</li>
            <li>常见问题</li>
            <li>联系客服</li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>配送方式</h3>
          <ul>
            <li>上门自提</li>
            <li>快递配送</li>
            <li>配送范围</li>
            <li>运费说明</li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>售后服务</h3>
          <ul>
            <li>退换货政策</li>
            <li>退换货流程</li>
            <li>价格保护</li>
            <li>售后咨询</li>
          </ul>
        </div>
        
        <div class="footer-section contact">
          <h3>联系我们</h3>
          <div class="contact-info">
            <p><i class="el-icon-phone"></i> 400-888-8888</p>
            <p><i class="el-icon-message"></i> service@beauty.com</p>
            <div class="social-icons">
              <i class="el-icon-s-platform"></i>
              <i class="el-icon-s-cooperation"></i>
              <i class="el-icon-s-custom"></i>
            </div>
          </div>
        </div>
      </div>
      
      <div class="copyright">
        <p>© 2023 美妆商城 All Rights Reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useUserStore } from '../../stores/user';

const router = useRouter();
const userStore = useUserStore();

// 用户信息
const username = computed(() => userStore.username);
const customerId = computed(() => userStore.user.customerId || '未知');

// 搜索相关
const searchKeyword = ref('');
const cartCount = ref(0);
const activeCategory = ref('home');

// 热门推荐商品数据
const recommendedProducts = ref([
  {
    id: 1,
    name: '奢华修护面霜',
    description: '深层滋养，提升肌肤活力',
    price: 299.00,
    reviewCount: 128,
    imageUrl: 'https://via.placeholder.com/250x250?text=Face+Cream'
  },
  {
    id: 2,
    name: '亮采精华液',
    description: '改善肤色不均，提亮肤色',
    price: 199.00,
    reviewCount: 85,
    imageUrl: 'https://via.placeholder.com/250x250?text=Serum'
  },
  {
    id: 3,
    name: '丝绒哑光口红',
    description: '持久显色，不易脱妆',
    price: 159.00,
    reviewCount: 246,
    imageUrl: 'https://via.placeholder.com/250x250?text=Lipstick'
  },
  {
    id: 4,
    name: '轻透无瑕粉底液',
    description: '轻薄服帖，打造无瑕妆容',
    price: 269.00,
    reviewCount: 162,
    imageUrl: 'https://via.placeholder.com/250x250?text=Foundation'
  }
]);

// 新品上架
const newArrivals = ref([
  {
    id: 5,
    name: '多效修护眼霜',
    description: '淡化细纹，提亮眼周',
    price: 239.00,
    imageUrl: 'https://via.placeholder.com/250x250?text=Eye+Cream'
  },
  {
    id: 6,
    name: '保湿润唇膏',
    description: '滋润保湿，修护唇部',
    price: 89.00,
    imageUrl: 'https://via.placeholder.com/250x250?text=Lip+Balm'
  },
  {
    id: 7,
    name: '净颜洁面乳',
    description: '温和清洁，不紧绷',
    price: 129.00,
    imageUrl: 'https://via.placeholder.com/250x250?text=Cleanser'
  },
  {
    id: 8,
    name: '轻盈散粉',
    description: '控油持妆，自然雾面',
    price: 179.00,
    imageUrl: 'https://via.placeholder.com/250x250?text=Powder'
  }
]);

// 限时特惠
const flashSaleProducts = ref([
  {
    id: 9,
    name: '水光精华面膜',
    salePrice: 99.00,
    originalPrice: 199.00,
    discount: '5折',
    imageUrl: 'https://via.placeholder.com/200x200?text=Mask'
  },
  {
    id: 10,
    name: '清透防晒霜',
    salePrice: 129.00,
    originalPrice: 229.00,
    discount: '5.6折',
    imageUrl: 'https://via.placeholder.com/200x200?text=Sunscreen'
  },
  {
    id: 11,
    name: '玫瑰香水',
    salePrice: 259.00,
    originalPrice: 459.00,
    discount: '5.6折',
    imageUrl: 'https://via.placeholder.com/200x200?text=Perfume'
  },
  {
    id: 12,
    name: '矿物眼影盘',
    salePrice: 149.00,
    originalPrice: 299.00,
    discount: '5折',
    imageUrl: 'https://via.placeholder.com/200x200?text=Eyeshadow'
  },
  {
    id: 13,
    name: '纤长睫毛膏',
    salePrice: 99.00,
    originalPrice: 199.00,
    discount: '5折',
    imageUrl: 'https://via.placeholder.com/200x200?text=Mascara'
  }
]);

// 轮播图数据
const banners = ref([
  {
    id: 1,
    title: '夏季新品，清透水润',
    description: '限时优惠，满300减50',
    imageUrl: '/src/assets/首页1.jpg'
  },
  {
    id: 2,
    title: '明星产品，口碑之选',
    description: '大牌联合，折扣享不停',
    imageUrl: '/src/assets/首页2.jpg'
  },
  {
    id: 3,
    title: '会员专享，独家优惠',
    description: '新人首单，额外95折',
    imageUrl: '/src/assets/首页3.jpg'
  }
]);

// 方法
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};

const viewProductDetail = (productId) => {
  router.push(`/user/product/${productId}`);
};

const addToCart = (product) => {
  // 这里应该调用添加到购物车的API
  ElMessage.success(`已将 ${product.name} 添加到购物车`);
  // 更新购物车数量
  cartCount.value++;
  // 阻止事件冒泡
  event.stopPropagation();
};

const addToFavorite = (product) => {
  // 这里应该调用添加到收藏的API
  ElMessage.success(`已将 ${product.name} 添加到收藏`);
  // 阻止事件冒泡
  event.stopPropagation();
};

onMounted(() => {
  // 检查用户是否已登录
  if (!userStore.isLoggedIn) {
    router.push('/login');
    return;
  }
  
  // 验证用户是否为商家
  if (userStore.isMerchant) {
    ElMessage.error('访问被拒绝。正在跳转到商家控制面板。');
    router.push('/merchant/home');
  }
});
</script>

<style scoped>
.mall-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部导航 */
.mall-header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.mall-logo {
  color: #FF6B98;
  margin: 0;
  font-size: 26px;
  font-weight: bold;
}

.lipstick-icon {
  font-size: 30px;
  margin-right: 10px;
}

.logo-area {
  display: flex;
  align-items: center;
}

.search-box {
  width: 500px;
}

.search-input {
  width: 100%;
}

.user-actions {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
  position: relative;
  cursor: pointer;
}

.action-item i {
  font-size: 20px;
  color: #606266;
}

.action-item span {
  font-size: 12px;
  margin-top: 3px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #FF6B98;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info i {
  margin-right: 5px;
}

/* 分类导航 */
.category-nav {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  border-top: 1px solid #f0f0f0;
  position: sticky;
  top: 70px;
  z-index: 999;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.category-menu-list {
  border-bottom: none;
}

.el-menu-item {
  font-size: 14px;
}

/* 内容区域 */
.mall-content {
  flex: 1;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

/* 轮播图 */
.banner-section {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.banner-item {
  height: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  padding: 0 50px;
}

.banner-content {
  max-width: 400px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.banner-content h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.banner-content p {
  font-size: 16px;
  margin-bottom: 20px;
}

/* 商品区块 */
.section-block {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: bold;
  position: relative;
}

.section-header h2:after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #FF6B98;
}

.countdown {
  display: flex;
  align-items: center;
  color: #606266;
}

.time-box {
  background-color: #303133;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  margin: 0 3px;
  font-weight: bold;
}

/* 商品列表 */
.product-scroll {
  overflow-x: auto;
  margin: 0 -20px;
  padding: 0 20px;
}

.product-list {
  display: flex;
  gap: 15px;
  padding-bottom: 10px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.flash-product {
  min-width: 200px;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.product-image {
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.discount-badge, .new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #FF6B98;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.new-badge {
  background-color: #67C23A;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-desc {
  color: #909399;
  font-size: 12px;
  margin: 0 0 10px 0;
  height: 36px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-price {
  color: #FF6B98;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.current-price {
  color: #FF6B98;
  font-size: 18px;
  font-weight: bold;
}

.original-price {
  color: #909399;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 5px;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-rating i {
  color: #FFCC00;
  font-size: 12px;
}

.product-rating span {
  color: #909399;
  font-size: 12px;
  margin-left: 5px;
}

.product-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 15px 15px;
}

.buy-button {
  width: 100%;
  margin-top: 10px;
}

/* 底部区域 */
.mall-footer {
  background-color: #263238;
  color: #b0bec5;
  padding: 40px 0 0;
  margin-top: 40px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15px 40px;
}

.footer-section {
  flex: 1;
  min-width: 180px;
  margin-bottom: 20px;
}

.footer-section h3 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 16px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #FF6B98;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

.footer-section li:hover {
  color: #fff;
}

.contact-info p {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.contact-info i {
  margin-right: 10px;
}

.social-icons {
  display: flex;
  margin-top: 10px;
}

.social-icons i {
  font-size: 20px;
  margin-right: 15px;
  cursor: pointer;
  transition: color 0.3s;
}

.social-icons i:hover {
  color: #fff;
}

.copyright {
  background-color: #1c272b;
  padding: 15px 0;
  text-align: center;
  font-size: 12px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .search-box {
    width: 300px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-section {
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
  }
  
  .logo-area {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  
  .search-box {
    width: 100%;
    order: 3;
    margin-top: 10px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    width: 100%;
    margin-bottom: 30px;
  }
}
</style> 